<style>
  /* Add your custom CSS styles here */
  form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
  }

  input[type="submit"] {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  tr:hover {
    background-color: #f5f5f5;
  }

  .button-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .button-container a {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
  }

  .update-button {
    background-color: #28a745;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
  }
</style>

<form method="POST">
  {% csrf_token %}
  <input type="text" name="student_name" placeholder="Enter student name" />
  <input type="submit" value="Search" />
</form>

<div class="button-container">
  <a href="{% url 'add' %}">增加</a>
</div>

<form method="POST" action="{% url 'delete' %}" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;">
  {% csrf_token %}
  <table style="border-radius: 5; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
    <tr>
      <th></th>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Action</th>
    </tr>
    {% for student in students %}
    <tr>
      <td><input type="checkbox" name="selected_students" value="{{ student.id }}"></td>
      <td>{{ student.id }}</td>
      <td>{{ student.name }}</td>
      <td>{{ student.age }}</td>
      <td>{{ student.email }}</td>
      <td>{{ student.phone }}</td>
      <td><a href="{% url 'update' %}?id={{ student.id }}" class="update-button">更新</a></td>
    </tr>
    {% endfor %}
  </table>
  <input type="submit" value="删除选中" style="margin-top: 20px;" />
</form>